<template>
    <div>
        <div class="folderCount title">标题：{{contentValue.title}}</div>
        <div class="folderCount">简要描述 ：{{contentValue.description}}</div>
        <div class="folderCount">请求URL ：{{contentValue.url}}</div>
        <div class="folderCount" :class="typeClass[contentValue.type]">请求方式 ：{{contentValue.type}}</div>
        <br>
        <div class="folderCount" style="padding: 0 0 0 20px;">
            <el-button size="small" type="primary" plain @click="addModel('req')" icon="el-icon-circle-plus-outline">添加请求模型 </el-button>
        </div>
        <br>
        <br>

        <div class="folderCount" v-for="(item, index) in reqModel" :key="'req-' +index" v-if="item.checked">
            <i class="el-icon-collection-tag" style="color: #409EFF;"></i>
            {{item.name}}
            <span style="color: #999;">{{item.key}}</span>
        </div>

        <br>
        <el-dialog :title="'添加数据模型'" :close-on-click-modal="false" destroy-on-close append-to-body :visible.sync="showAddreqModel" width="600px">
            <el-row :gutter="5" class="folderCount" v-for="(item, index) in reqModel" :key="'req-' + index">
                <el-checkbox v-model="item.checked" class="folderCount">
                    <div class="folderCount"> {{item.name}} <span style="color: #999;">{{item.key}}</span></div>
                </el-checkbox>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="addModelToData">添加</el-button>
            </span>
        </el-dialog>

        <div class="folderCount folderTitle" v-if="contentValue.header">
            <i class="el-icon-s-order"></i> header参数
            <div class="switch" @click="viewOption.showHeader = !viewOption.showHeader">
                <i class="el-icon-arrow-up" :style="{'transform': viewOption.showHeader ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
            </div>
            <pre class="codeMessage" v-if="contentValue.header && viewOption.showHeader">{{contentValue.header}}</pre>
        </div>

        <div class="folderCount folderTitle" v-if="contentValue.body && contentValue.bodyType == 0">
            <i class="el-icon-s-order"></i> Body参数(Post data 参数)
            <div class="switch" @click="viewOption.showBody = !viewOption.showBody">
                <i class="el-icon-arrow-up" :style="{'transform': viewOption.showBody ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
            </div>
            <pre class="codeMessage" v-if="contentValue.body && contentValue.bodyType == 0 && viewOption.showBody">{{contentValue.body}}</pre>
        </div>

        <div class="folderCount folderTitle" v-if="contentValue.fromdata && contentValue.bodyType == 1">
            <i class="el-icon-s-order"></i> formData参数(form 表单传参)
            <div class="switch" @click="viewOption.showFormData = !viewOption.showFormData">
                <i class="el-icon-arrow-up" :style="{'transform': viewOption.showFormData ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
            </div>
            <pre class="codeMessage" v-if="contentValue.fromdata && contentValue.bodyType == 1 && viewOption.showFormData">{{formDataSrt}}</pre>
        </div>

        <div class="folderCount folderTitle" v-if="contentValue.query">
            <i class="el-icon-s-order"></i> query参数(url参数)
            <div class="switch" @click="viewOption.showQuery = !viewOption.showQuery">
                <i class="el-icon-arrow-up" :style="{'transform': viewOption.showQuery ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
            </div>
            <pre class="codeMessage" v-if="contentValue.query && viewOption.showQuery">{{contentValue.query}}</pre>
        </div>

        <div class="folderCount folderTitle" v-if="contentValue.rest">
            <i class="el-icon-s-order"></i> rest参数(动态URl传参)
            <div class="switch" @click="viewOption.showRest = !viewOption.showRest">
                <i class="el-icon-arrow-up" :style="{'transform': viewOption.showRest ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
            </div>
            <pre class="codeMessage" v-if="contentValue.rest && viewOption.showRest">{{contentValue.rest}}</pre>
        </div>

        <br>
        <br>
        <div class="folderCount" style="padding: 0 0 0 20px;">
            <el-button size="small" type="primary" plain @click="addModel('res')" icon="el-icon-circle-plus-outline">添加返回模型 </el-button>
        </div>
        <br>
        <br>
        <div class="folderCount modelItem" v-for="(item, index) in resModel" :key="'res-' + index" v-if="item.checked">
            <i class="el-icon-collection-tag" style="color: #409EFF;"></i>
            {{item.name}}
            <span style="color: #999;">{{item.key}}</span>
        </div>
        <br>

        <div class="folderCount folderTitle">
            <i class="el-icon-s-order"></i> 返回值示例
            <div class="switch" @click="viewOption.showRes = !viewOption.showRes">
                <i class="el-icon-arrow-up" :style="{'transform': viewOption.showRes ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
            </div>
            <pre class="codeMessage" v-if="resData && viewOption.showRes">{{resData}}</pre>
        </div>

        <el-dialog :title="'添加数据模型'" :close-on-click-modal="false" destroy-on-close append-to-body :visible.sync="showAddresModel" width="600px">
            <el-row :gutter="5" class="folderCount" v-for="(item, index) in resModel" :key="'res-' +  index">
                <el-checkbox v-model="item.checked" class="folderCount">
                    <div class="folderCount"> {{item.name}} <span style="color: #999;">{{item.key}}</span></div>
                </el-checkbox>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="addModelToData">添加</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="'ShowDoc 文档'" :close-on-click-modal="false" destroy-on-close append-to-body :visible.sync="ShowReadMeCode" width="600px">
            <el-input v-model="ReadMeCode" readonly type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 20}"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="copyCode">复制到剪切板</el-button>
            </span>
            <div style="clear: both; height: 1px;"></div>
        </el-dialog>

        <br>
        <br>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="samll" style="float: right;" @click="exportCode">生成</el-button>
        </span>
        <div style="clear: both;"></div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
const clipboard = require('electron').clipboard;


export default {
    data() {
        return {
            typeClass: {
                GET: 'text_green',
                POST: 'text_orange',
                PUT: 'text_blue',
                DEL: 'text_red'
            },
            staticName: {
                0: '设计中',
                1: '进行中',
                2: '异常',
                3: '已完成',
                4: '已废弃',
                undefined: '',
                null: '',
            },
            staticClass: {
                0: 'text_orange',
                1: 'text_blue',
                2: 'text_red',
                3: 'text_green',
                4: 'text_gray',
                undefined: 'text_transparent',
                null: 'text_transparent',
            },
            reqModel: [],
            resModel: [],
            showAddreqModel: false,
            showAddresModel: false,
            ShowReadMeCode: false,
            ModelObject: [],
            addType: false,
            contentValue: {},
            formDataSrt: '',
            resData: '',
            ReadMeCode: '',
            viewOption: {
                showHeader: false,
                showBody: false,
                showFormData: false,
                showQuery: false,
                showRest: false,
                showRes: false,
            },
        }
    },
    computed: {
        ...mapState("model", {
            models: state => state.models,
        }),
    },
    methods: {
        addData(data, resData) {
            this.contentValue = JSON.parse(JSON.stringify(data));
            // console.log(this.contentValue);
            this.resData = resData;
            this.formDataSrt = '';
            if (this.contentValue.fromdata) {
                this.contentValue.fromdata = JSON.parse(this.contentValue.fromdata);
                for (let i = 0; i < this.contentValue.fromdata.length; i++) {
                    const element = this.contentValue.fromdata[i];
                    this.formDataSrt += '<input name="' + element.key + '" type="' + (element.type == 'text' ? 'text' : 'file') + '" value="' + element.value + '">' + '\n'
                }
            };
            // console.log(this.formDataSrt);
            var _array = JSON.parse(JSON.stringify(this.models));
            this.reqModel = [];
            this.resModel = [];
            for (let i = 0; i < _array.length; i++) {
                const element = _array[i];
                this.reqModel.push({
                    key: element.key,
                    name: element.name,
                    itemArray: element.itemArray,
                    checked: false
                });
                this.resModel.push({
                    key: element.key,
                    name: element.name,
                    itemArray: element.itemArray,
                    checked: false
                });
            };
        },
        addModel(type) {
            this['showAdd' + type + 'Model'] = true;
        },
        addModelToData() {
            this.showAddreqModel = false;
            this.showAddresModel = false;
        },
        copyCode() {
            clipboard.writeText(this.ReadMeCode);
            this.$message({
                message: '复制成功',
                type: 'success'
            });
        },
        exportCode() {
            this.ShowReadMeCode = true;

            this.ReadMeCode = '';
            this.ReadMeCode += '#### 简要描述：\n\n';
            this.ReadMeCode += '-  ' + this.contentValue.description + '\n\n';
            this.ReadMeCode += '#### 请求URL：\n\n';
            this.ReadMeCode += '-  `' + this.contentValue.url + '`\n\n';
            this.ReadMeCode += '#### 请求方式：\n\n';
            this.ReadMeCode += '-  ' + this.contentValue.type + '\n\n';
            this.ReadMeCode += '#### 输入参数：\n\n';

            for (let i = 0; i < this.reqModel.length; i++) {
                const element = this.reqModel[i];
                if (element.checked) {
                    this.ReadMeCode += '###### ' + element.name + '(' + element.key + ')' + '\n\n';
                    this.ReadMeCode += '|参数名|必选|类型|说明|\n|:----    |:---|:----- |-----   |\n';
                    for (let d = 0; d < element.itemArray.length; d++) {
                        const item = element.itemArray[d];
                        this.ReadMeCode += '|' + item.key + '|' + (item.checked ? '是' : '否') + '|' + item.type + '|' + item.annotate + '|\n';
                    }
                    this.ReadMeCode += '\n\n';
                };
            };
            this.ReadMeCode += '#### 请求示例：\n\n';
            if (this.contentValue.header) {
                this.ReadMeCode += '###### header 参数\n\n';
                this.ReadMeCode += '```\n' + this.contentValue.header + '\n```\n\n';
            }

            if (this.contentValue.body && this.contentValue.bodyType == 0) {
                this.ReadMeCode += '###### Body参数(Post data 参数)\n\n';
                this.ReadMeCode += '```\n' + this.contentValue.body + '\n```\n\n';
            }

            if (this.contentValue.fromdata && this.contentValue.bodyType == 1) {
                this.ReadMeCode += '###### formData参数(form 表单传参)\n\n';
                this.ReadMeCode += '```\n' + this.contentValue.fromdata + '\n```\n\n';
            }

            if (this.contentValue.query) {
                this.ReadMeCode += '###### query参数(url参数)\n\n';
                this.ReadMeCode += '```\n' + this.contentValue.query + '\n```\n\n';
            }

            if (this.contentValue.rest) {
                this.ReadMeCode += '###### rest参数(动态URl传参)\n\n';
                this.ReadMeCode += '```\n' + this.contentValue.rest + '\n```\n\n';
            }

            if (this.contentValue.rest) {
                this.ReadMeCode += '###### rest参数(动态URl传参)\n\n';
                this.ReadMeCode += '```\n' + this.contentValue.rest + '\n```\n\n';
            };
            this.ReadMeCode += '#### 返回值参数\n\n';
            for (let i = 0; i < this.resModel.length; i++) {
                const element = this.resModel[i];
                if (element.checked) {
                    this.ReadMeCode += '###### ' + element.name + '(' + element.key + ')' + '\n\n';
                    this.ReadMeCode += '|参数名|必选|类型|说明|\n|:----    |:---|:----- |-----   |\n';
                    for (let d = 0; d < element.itemArray.length; d++) {
                        const item = element.itemArray[d];
                        this.ReadMeCode += '|' + item.key + '|' + (item.checked ? '是' : '否') + '|' + item.type + '|' + item.annotate + '|\n';
                    }
                    this.ReadMeCode += '\n\n';
                };
            };
            if (this.resData) {
                this.ReadMeCode += '#### 返回值示例\n\n';
                this.ReadMeCode += '```\n' + this.resData + '\n```\n\n';
            };

        },
    },
}
</script>

<style scoped>
    .title { font-size: 20px; line-height: 40px; text-align: center; color: #333; }
    .folderTitle { border-bottom: 1px solid #eee; padding-top: 8px;}
    .modelItem { padding: 3px 5px;}
    .folderCount { font-size: 18px; line-height: 35px; }
    .addButton { cursor: pointer;}
    .addButton:hover { color: sandybrown;}
    .codeMessage {font-family:consola !important; font-size: 14px;line-height: 22px; padding: 15px; border: 1px solid #ccc; border-radius: 3px;}
    .switch { position: relative; float: right; border: none; width: 33px; height: 33px;}


</style>